<template>
  <div>
    <el-form  style="display: flex; justify-content: flex-start; margin: 10px 0" :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="name" placeholder="档案号/姓名/手机号"></el-input>
        </el-form-item>
        <el-form-item label="">
      <el-select  v-model="status" placeholder="请选择状态">
        <el-option label="已预约" :value="0"></el-option>
        <el-option label="确认预约" :value="1"></el-option>
        <el-option label="取消预约" :value="2"></el-option>
        <el-option label="已结束" :value="3"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
          <el-button icon="el-icon-search" circle @click="queryAllBooking()"
            ></el-button
          >
        </el-form-item>
      </el-form>
    <el-button  style="display: flex; justify-content: flex-start; margin: 10px 0" type="primary"
    @click="dialogFormVisible = true;member={};queryTzAll();"
    >新增</el-button>
    <el-table :data="bookingList" @selection-change="handleSelectionChange" height="65vh">
      <el-table-column prop="rid" type="selection">
      </el-table-column>
      <el-table-column prop="time" label="预约日期">
      </el-table-column>
      <el-table-column prop="file_number" label="档案号" >
      </el-table-column>
      <el-table-column prop="name" label="姓名" >
      </el-table-column>
      <el-table-column prop="phone" label="手机号" >
      </el-table-column>
      <el-table-column prop="yylx" label="预约类型" >
        <template slot-scope="scope">
            <span>{{ scope.row.yylx | yylx }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="预约状态" >
        <template slot-scope="scope">
            <span>{{ scope.row.status | stau }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="rid" label="操作">
        <template slot-scope="scope">
          <el-button 
          @click="
              confirmBooking(scope.row);
            "
          type="text">确认预约
          </el-button>
          <el-button   @click="cancelBooking(scope.row)" type="text" >取消预约</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[2, 3, 4, 6, 10]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <el-dialog title="新增预约" width="80%" :visible.sync="dialogFormVisible">

      <el-tabs type="border-card">
        <el-tab-pane label="套餐基本信息">
          <el-form style="display: flex; justify-content: flex-start; margin: 10px " :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="queryname" placeholder="档案号/姓名/手机号"></el-input>
        </el-form-item>
        <el-form-item>
          
                  <el-popover
          placement="right"
          width="500"
          transition
          trigger="click">
        
          <el-table :data="MemberData">
            <el-table-column width="100" property="file_number" label="编号"></el-table-column>
            <el-table-column width="100" property="name" label="姓名"></el-table-column>
            <el-table-column width="200" property="card" label="身份证"></el-table-column>
            <el-table-column  property="file_number" label="操作">
              <template slot-scope="scope">
                <el-button @click="aaa(scope.row)" 
                type="success" icon="el-icon-check" circle></el-button>
              </template>
            </el-table-column>
          </el-table>
    
          <el-button  slot="reference" icon="el-icon-search" circle @click="queryMember()"></el-button>
          
        </el-popover>
    
          
        </el-form-item>
      </el-form>

          <el-form size="mini" :label-position="labelPosition" label-width="80px" :model="member">
            <el-form-item label="姓名">
          <el-input v-model="member.name"></el-input>
        </el-form-item>
        <el-form-item label="身份证">
          <el-input v-model="member.card"></el-input>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-input v-model="member.birthdate"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="member.phone"></el-input>
        </el-form-item>
        <el-form-item label="性别">
            <el-input v-model="member.sex"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="member.age"></el-input>
        </el-form-item>
        <el-form-item label="婚姻状态">
          <el-input  v-model="member.maritalStatus"></el-input>
        </el-form-item>
        <el-form-item label="预约时间">
          <el-date-picker
          @change="queryBookingdate()"
      v-model="booking.seltime"
      type="date"
      value-format="yyyy-MM-dd"
      placeholder="选择日期">
    </el-date-picker>
        </el-form-item>
       
      </el-form>
    
        </el-tab-pane>

        <el-tab-pane label="选择套餐">
          <el-form  style="display: flex; justify-content: flex-start; margin: 10px 0" :inline="true"  class="demo-form-inline">
        <el-form-item label="名称">
          <el-input v-model="tname" placeholder="名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" circle @click="queryTzAll()"
            ></el-button
          >
        </el-form-item>
      </el-form>
          <div>
      <el-table  @select-all="selectAll" :data="tc" ref="multipleTable" @select="select"  @selection-change="handleSelectionChangexx" height="65vh">
        <el-table-column type="selection" @change="cheng(tid)" prop=tid></el-table-column>
        <el-table-column prop="tid" label="套餐编号">
        </el-table-column>
        <el-table-column prop="tname" label="套餐名称" >
        </el-table-column>
        <el-table-column prop="sex" label="适用性别" >
          <template  slot-scope="scope">
            <span>{{ scope.row.sex | sex }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="age" label="适用年龄" >
        </el-table-column>
        <el-table-column prop="price" label="套餐价格" >
        </el-table-column>
        <el-table-column prop="brief" label="套餐介绍" >
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange2"
        @current-change="handleCurrentChange2"
        :current-page="currentPage2"
        :page-sizes="[2, 3, 4, 6, 10]"
        :page-size="pageSize2"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total2"
      >
      </el-pagination>
    </div>

        </el-tab-pane>
      </el-tabs>

      



      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="
            dialogFormVisible = false;
            addbooking();
          "
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
data () {
    return {
      status:0,
      tc:[],
      labelPosition: 'right',
        name:"",
        tname:"",
        queryname:'',//新增查询
        member:{},//用户 
        MemberData:[],
        booking:{},
        bookingList:[],
      dialogTableVisible: false,
      dialogFormVisible: false,
      currentPage: 1,
      total: 3,
      pageSize: 4,
      currentPage2: 1,
      total2: 3,
      pageSize2: 4,
      formLabelWidth: "120px",
    }
},
created () {
    this.queryAllBooking();
},
filters: {
  yylx:function(yylx){
    return yylx==0?'微信预约':"线下预约"
    },
    stau:function(s){
        return s==0?"已预约":s==1?"确认预约":"取消预约"
    },
    sex:function(sex){
    return sex==0?'♀':sex==1?'♂':"不限"
    }
},
methods: {
  queryBookingdate(){
      this.axios.post("/api/lzh/queryBookingdate?date="+this.booking.seltime).
      then(result=>{
        if(result.data==1){
          this.$message.error('预约失败');
          this.booking.seltime='';
        }
      })
  },
  aaa(data){
      this.member=data;
      this.member.sex=data.sex==0?'女':'男'
      this.member.maritalStatus=data.maritalStatus==0?'未婚':'已婚'
  },
 cheng(data){
    console.log(data)
 },
  select(selection, row) {
      if (selection.length > 1) {
        let del_row = selection.shift()
        this.$refs.multipleTable.toggleRowSelection(del_row, false)
      }
    },
    selectAll(selection){
      if (selection.length > 1) {
        selection.length = 1
      }
    },
      // 新增查询用户
      queryMember(){
        this.axios.post("/api/hj/queryMemberByName?name="+this.queryname).then(result=>{
          this.MemberData=result.data
         });
      },
      //新增查询套餐
      queryTzAll(){
         this.axios
        .post("/api/lzh/queryAllPackage", {
          pageNum: this.currentPage2,
          pageSize: this.pageSize2,
          searchObj: {
            tname: this.tname,
          },
        }).then(result=>{
          this.tc=result.data.list;
          this.total2 = result.data.total;
          console.log(this.tc)
         });
      },
    confirmBooking(data){
        const h = this.$createElement;
        this.$msgbox({
          title: '消息',
          message: h('p', null, [
            h('span', null, '确定预约嘛？ '),
            h('i', { style: 'color: teal' }, '')
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = '执行中...';
              setTimeout(() => {
                done();
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                }, 300);
              }, 3000);
            } else {
              done();
            }
          }
        }).then(action => {
          data.user=data.name
        this.axios.post("/api/lzh/confirmBooking",data).then(result=>{

            this.$message({
            type: 'success',
            message: '预约成功！'
          });
          this.queryAllBooking();
        });
        })

         
    },  
    addbooking(){
      var moment = require('moment');
      this.member.time=moment(new Date()).format("YYYY-M-D")
      this.member.tcid=this.booking.tcid
      this.member.seltime=this.booking.seltime
      this.member.user=this.member.name
      this.member.sex=this.member.sex=='女'?0:1
      this.member.maritalStatus=this.member.maritalStatus=='未婚'?0:1
      console.log( this.member)
          this.axios.post("/api/lzh/addBooking",this.member).then(result=>{
                this.$message({
            type: 'success',
            message: '预约成功！'
              });
          this.queryAllBooking();
               })
    },
    cancelBooking(data){
        const h = this.$createElement;
        this.$msgbox({
          title: '消息',
          message: h('p', null, [
            h('span', null, '确定取消预约嘛？ '),
            h('i', { style: 'color: teal' }, '')
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = '执行中...';
              setTimeout(() => {
                done();
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                }, 300);
              }, 3000);
            } else {
              done();
            }
          }
        }).then(action => {

        this.axios.post("/api/lzh/cancelBooking?rid="+data.rid  ).then(result=>{

            this.$message({
            type: 'success',
            message: '取消成功！'
          });
          this.queryAllBooking();
        });
        })
    },
    queryAllBooking(){
      console.log(this.status)
        this.axios.post("/api/lzh/queryAllBooking",{
            pageNum: this.currentPage,
            pageSize: this.pageSize,
            searchObj: {
                name: this.name,
                status:this.status
            },
        }).then(result=>{
            this.total = result.data.total;
             this.bookingList = result.data.list;
        })
    },
    handleSelectionChange(val) {
      // console.log(val)
      this.multipleSelection = val;
    },
    handleSelectionChange2(val) {
       console.log(val)
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.queryAllBooking();
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.queryAllBooking();
      // console.log(`当前页: ${val}`);
    },
    handleSelectionChangexx(val) {
      this.booking.tcid=val[0].tid
      this.multipleSelection = val;
    },
    handleSizeChange2(val) {
      this.pageSize2 = val;
      this.queryTzAll();
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange2(val) {
      this.currentPage2 = val;
      this.queryTzAll();
      // console.log(`当前页: ${val}`);
    },
}

}
</script>

<style>

</style>